<template>
  <img :src="qrCodeSrc" :alt="linkText" :style="{ width: size + 'px', height: size + 'px' }" />
</template>

<script>
import { ref, onMounted, watch } from 'vue';
import QRCode from 'qrcode';

export default {
  name: 'QRCode',
  props: {
    value: {
      type: String,
      required: true,
    },
    size: {
      type: Number,
      default: 256,
    },
    linkText: {
      type: String,
      default: 'QR Code',
    },
  },
  setup(props) {
    const qrCodeSrc = ref('');

    const generateQRCode = async () => {
      try {
        qrCodeSrc.value = await QRCode.toDataURL(props.value, { width: props.size });
      } catch (error) {
        console.error('Error generating QR code:', error);
      }
    };

    onMounted(() => {
      generateQRCode();
    });

    watch(() => props.value, generateQRCode);

    return {
      qrCodeSrc,
      linkText: props.linkText,
      size: props.size,
    };
  },
};
</script>

<style scoped>
/* 你可以在这里添加一些样式来美化二维码图片 */
img {
  border: 1px solid #ccc;
  /* 其他样式 */
}
</style>